<template>
  <view>
    <tabTop type="1" @goBack="goBackTop"></tabTop>
    <view class="container">
      <swiper
        class="goodsimgs"
        :indicator-dots="true"
        indicator-active-color="#1877F2"
        :autoplay="false"
        :circular="true"
        :interval="2000"
        :duration="300"
      >
        <swiper-item v-if="goods.videoUrl">
          <div class="cover-view" @click="coverVideoBtn">
            <video
              :controls="false"
              :autoplay="false"
              :muted="videoData.voice === 1 ? false : true"
              :loop="true"
              :show-center-play-btn="false"
              :enable-progress-gesture="false"
              object-fit="contain"
              class="video"
              id="videoEl"
              :src="goods.videoUrl"
              @pause="onVideoPause"
              @play="onVideoPlay"
            ></video>
            <div class="cover-box">
              <image class="cover-box1" v-if="videoData.playDoor === 'pause'" src="../../static/imgs/play.png"></image>
              <image
                class="cover-box2"
                v-if="videoData.voice === 1"
                @click.stop="videoVoiceBtn(0)"
                src="../../static/imgs/h14.png"
              ></image>
              <image
                class="cover-box2"
                v-if="videoData.voice === 0"
                @click.stop="videoVoiceBtn(1)"
                src="../../static/imgs/h15.png"
              ></image>
            </div>
          </div>
        </swiper-item>
        <swiper-item v-for="(item, index) in goods.gallery" :key="index">
          <image class="swiperImage" :src="item" background-size="cover"></image>
        </swiper-item>
      </swiper>
      <!-- 分享 -->
      <view v-if="isSeckill">
        <view class="seckill">
          <view class="seckill_name_left">
            <view class="seckill_left">
              <view class="secPrice">￥{{ seckillGoodsVo.seckillPrice }}</view>
              <view class="retailPrice">￥{{ seckillGoodsVo.retailPrice }}</view>
            </view>
            <view class="seckill_right">
              <view class="children rightcolor">{{
                isSeckill && !seckillDoing ? '距离开始还剩' : '距离结束还剩'
              }}</view>
              <view class="children">
                <view class="num">{{ countDownHour }}</view
                >： <view class="num">{{ countDownMinute }}</view
                >：
                <view class="num">{{ countDownSecond }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <view v-else>
        <!-- <view class="goods_name">
          <view class="goods_name_left jhx_f10">{{ goods.name }}</view>
          <view class="goods_name_right iconfont icon-fenxiang" @tap="shareFriendOrCircle">分享</view>
        </view> -->
        <view class="share-pop-box" :hidden="!openShare">
          <view class="share-pop">
            <view class="close" @tap="closeShare">
              <image class="icon" src="/static/static/images/icon_close.png"></image>
            </view>
            <view class="share-info">
              <button class="sharebtn" open-type="share" v-if="!isGroupon">
                <image class="sharebtn_image" src="/static/static/images/wechat.png"></image>
                <view class="sharebtn_text">分享给好友</view>
              </button>
              <button
                class="savesharebtn"
                open-type="openSetting"
                @opensetting="handleSetting"
                v-if="!isGroupon && !canWrite"
              >
                <image class="sharebtn_image" src="/static/static/images/friend.png"></image>
                <view class="sharebtn_text">保存海报到相册</view>
              </button>
              <button class="savesharebtn" @tap="saveShare" v-if="!isGroupon && canWrite">
                <image class="sharebtn_image" src="/static/static/images/friend.png"></image>
                <view class="sharebtn_text">保存海报到相册</view>
              </button>
            </view>
          </view>
        </view>
      </view>

      <view class="goods-info">
        <view class="c">
          <view class="goods-info1">{{ goods.name }}</view>
          <view class="price">
            <view v-if="isSeckill">
              <view class="retailPrice jhx_f8">秒杀价：￥{{ seckillGoodsVo.seckillPrice }}</view>
              <view class="counterPrice jhx_f9"> 原始价：￥{{ seckillGoodsVo.retailPrice }}</view>
            </view>
            <view class="price1" v-else>
              <view class="retailPrice jhx_f8">￥{{ checkedSpecPrice }}</view>
              <view class="counterPrice jhx_f9" v-if="goods.counterPrice">￥{{ goods.counterPrice }}</view>
            </view>
            <view class="priceSales">销量：{{ goods.sales }}</view>
          </view>

          <view class="seckillNotiy" v-if="isSeckill && !seckillDoing">
            <view class="seckilltag">
              <text>秒杀预告</text>
            </view>
            <view class="seckilltime">
              <text>{{ seckillGoodsVo.noticeMsg }} 开始秒杀!</text>
            </view>
          </view>

          <!-- <view class="brand" v-if="brand.name">
            <navigator hover-class="none" :url="'../brandDetail/brandDetail?id=' + brand.id">
              <text>{{ brand.name }}</text>
            </navigator>
          </view> -->
        </view>
      </view>

      <view class="section-nav section-attr" @tap="switchAttrPop">
        <view class="t jhx_f4">{{ checkedSpecText }}</view>
        <image class="i jhx_f6" src="/static/static/images/address_right.png" background-size="cover"></image>
      </view>
      <view class="comments" v-if="comment.count > 0 && goodsTabsNo !== 1">
        <view class="h">
          <text class="t jhx_f4">热门评价</text>
          <!-- <navigator :url="'/pages/comment/comment?valueId=' + goods.id + '&type=0'">
            <text class="i jhx_f6">查看全部</text>
          </navigator> -->
        </view>
        <view class="b">
          <view v-for="(item, index) in comment.data" :key="index" class="item">
            <view class="info">
              <view class="user">
                <image :src="item.avatar"></image>
                <text>{{ item.nickname }}</text>
              </view>
              <view class="time">{{ item.addTime }}</view>
            </view>
            <view class="content">
              {{ item.content }}
            </view>
            <!-- <view class="imgs" v-if="item.picList.length > 0">
              <image v-for="(iitem, index2) in item.picList" :key="index2" class="img" :src="iitem"></image>
            </view> -->
          </view>
        </view>
      </view>

      <div id="goodsTabsScroll"></div>
      <div class="goods-tabsA" v-if="goodsTabsScrollCls"></div>
      <div class="goods-tabs" :style="goodsTabsScrollCls">
        <div class="goods-tabs1" @click="goodsTabsNoBtn(0)" :class="goodsTabsNo === 0 && 'goods-tabs-on'">商品详情</div>
        <div class="goods-tabs1" @click="goodsTabsNoBtn(1)" :class="goodsTabsNo === 1 && 'goods-tabs-on'">
          评价({{ comment.count > 999 ? '999+' : comment.count }})
        </div>
        <div
          class="goods-tabs1"
          @click="goodsTabsNoBtn(2)"
          :class="goodsTabsNo === 2 && 'goods-tabs-on'"
          v-if="topicInfo.purchaseInformation"
        >
          购买须知
        </div>
      </div>

      <div class="goodsTabWrap goodsTabWrapP" v-if="goodsTabsNo === 1">
        <comment-page :query="commentQuery"></comment-page>
      </div>
      <div class="goodsTabWrap" v-if="goodsTabsNo === 0">
        <!-- <view class="goods-attr" v-if="goods.unit">
          <view class="l">
            <view class="item">
              <text class="left">单位</text>
              <text class="right">{{ goods.unit }}</text>
            </view>
          </view>
        </view> -->
        <view class="goods-attr" v-if="attribute && attribute.length">
          <!-- <view class="t jhx_f4">商品参数</view> -->
          <view class="l">
            <view v-for="(item, index) in attribute" :key="index" class="item">
              <text class="left">{{ item.attribute }}</text>
              <text class="right">{{ item.value }}</text>
            </view>
          </view>
        </view>
        <view class="detail">
          <!--<import src="/lib/wxParse/wxParse.wxml"></import>-->
          <mp-html :preview-img="false" :content="article_goodsDetail"></mp-html>
        </view>
      </div>
      <div class="goodsTabWrap goodsTabWrapP" v-if="goodsTabsNo === 2">
        <mp-html :content="topicInfo.purchaseInformation"></mp-html>
      </div>

      <view class="common-problem" v-if="false">
        <view class="h">
          <view class="line"></view>
          <text class="title">常见问题</text>
        </view>
        <view class="b">
          <view v-for="(item, index) in issueList" :key="index" class="item">
            <view class="question-box">
              <text class="spot"></text>
              <text class="question">{{ item.question }}</text>
            </view>
            <view class="answer">
              {{ item.answer }}
            </view>
          </view>
        </view>
      </view>

      <!-- 大家都在看 -->
      <view class="related-goods" v-if="false">
        <!-- <view class="related-goods" v-if="relatedGoods.length > 0"> -->
        <view class="h">
          <view class="line"></view>
          <text class="title">大家都在看</text>
        </view>
        <view class="b">
          <view v-for="(item, index) in relatedGoods" :key="index" class="item">
            <navigator :url="'/pages/goods/goods?id=' + item.id">
              <image class="img" :src="item.picUrl" background-size="cover"></image>
              <text class="name jhx_f7">{{ item.name }}</text>
              <text class="price jhx_f8">￥{{ item.retailPrice }}</text>
            </navigator>
          </view>
        </view>
      </view>
    </view>
    <!-- 规格选择界面 -->
    <view class="attr-pop-box" :hidden="!openAttr" @click="closeAttr">
      <view class="attr-pop" @click.stop>
        <view class="close" @tap="closeAttr">
          <image class="icon" src="/static/static/images/icon_close.png"></image>
        </view>
        <view class="img-info">
          <image class="img" :src="checkSpecificationUrl || goods.picUrl"></image>
          <view class="info">
            <view class="c">
              <view v-if="isSeckill" class="p">秒杀价：￥{{ checkedSpecPrice }}</view>
              <view v-else class="p"><text class="p1">￥</text>{{ checkedSpecPrice || goods.price1 }}</view>
              <view class="a" v-if="tmpSpecText">规格：{{ tmpSpecText }}</view>
              <view class="a" v-if="checkedSpecPrice"
                >数量：{{ tmpSpecTextNum || goodsNumCount }}
                <view class="a1" v-if="goods.unit">单位：{{ goods.unit }}</view>
              </view>
              <view class="a" v-else
                >数量：{{ goodsNumCount }}<view class="a1" v-if="goods.unit">单位：{{ goods.unit }}</view></view
              >
            </view>
          </view>
        </view>

        <!-- 规格列表 -->
        <view class="spec-con">
          <view v-for="(item, index) in specificationList" :key="index" class="spec-item">
            <view class="name">{{ item.name }}</view>
            <view class="values">
              <view
                v-for="(vitem, index2) in item.valueList"
                :key="index2"
                :class="'value ' + (vitem.checked ? 'selected' : '')"
                @tap="clickSkuValue"
                :data-value-id="vitem.id"
                :data-name="vitem.specification"
                >{{ vitem.value }}</view
              >
            </view>
          </view>

          <view class="spec-con" v-if="groupon.length > 0">
            <view class="spec-item">
              <view class="name">团购立减</view>
              <view class="values">
                <view
                  v-for="(item, index) in groupon"
                  :key="index"
                  :class="'value ' + (item.checked ? 'selected' : '')"
                  @tap="clickGroupon"
                  :data-value-id="item.id"
                  >￥{{ item.discount }} ({{ item.discountMember }}人)</view
                >
              </view>
            </view>
          </view>

          <!-- 数量 -->
          <view v-if="!isSeckill" class="number-item">
            <view class="name">数量</view>
            <view class="selnum">
              <view class="cut" @tap="cutNumber">-</view>
              <input :value="number" class="number" disabled="true" type="number" />
              <view class="add" @tap="addNumber">+</view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系客服 -->
    <!-- <button
      class="contact"
      type="default-dark"
      session-from="weapp"
      size="27"
      :send-message-title="goods.name"
      :send-message-img="goods.gallery[0]"
      show-message-card="true"
      :send-message-path="'/pages/index/index?goodId=' + goods.id"
      open-type="contact"
      plain
    ></button> -->

    <!-- 底部按钮 -->
    <view class="bottom-btn">
      <view class="bottom-btnA1">
        <view class="l l-collect" @tap="addCollectOrNot" v-if="!isGroupon">
          <image class="icon1" :src="collectImage"></image>
          <view class="text">客服</view>
        </view>
        <view class="l l-cart" @tap="openCartPage" v-if="!isGroupon">
          <view class="box">
            <text class="cart-count" v-if="cartGoodsCount">{{ cartGoodsCount }}</text>
            <image class="icon1" src="/static/imgs/22.png"></image>
            <view class="text">购物车</view>
          </view>
        </view>
      </view>
      <view class="r" @tap="addToCart" v-if="!soldOut">加入购物车</view>
      <view class="n" v-if="soldOut">商品已售空</view>
      <view v-else-if="!isSeckill" class="c" @tap="addFast">{{ isGroupon ? '参加团购' : '立即购买' }}</view>
      <view v-else-if="!seckillDoing" class="c" @tap="subscribeMsg">{{
        seckillGoodsVo.tiped == 1 ? '已提醒' : '提醒我'
      }}</view>
      <view v-else class="c" @tap="doSeckill">立即秒杀</view>
    </view>
    <share-tip
      :isAgent="isAgent"
      v-if="isAgent && goods.brokeragePrice > 0.01"
      :brokeragePrice="goods.brokeragePrice"
      @onColse="onColse"
      @sharedFn="shareFriendOrCircle"
    ></share-tip>
  </view>
</template>

<script>
import wxh from '../../utils/wxh.js'
let app = getApp()

let util = require('../../utils/util.js')
let api = require('../../config/api.js')
let user = require('../../utils/user.js')
import shareTip from '../../lib/share-tipwin/index'
import commentPage from '../comment/comment.vue'

export default {
  data() {
    return {
      goodsTabsScrollCls: '',
      topicInfo: {},
      commentQuery: {},
      goodsTabsNo: 0,
      id: 0,
      goods: {},
      groupon: [],
      //该商品支持的团购规格
      grouponLink: {},
      //参与的团购
      attribute: [],
      issueList: [],
      comment: [],
      brand: {},
      specificationList: [],
      productList: [],
      relatedGoods: [],
      cartGoodsCount: 0,
      userHasCollect: 0,
      number: 1,
      checkedSpecText: '规格数量选择',
      tmpSpecText: '',
      tmpSpecTextNum: 0,
      checkedSpecPrice: 0,
      openAttr: false,
      openShare: false,
      noCollectImage: '/static/imgs/32.png',
      hasCollectImage: '/static/imgs/32.png',
      collectImage: '/static/imgs/32.png',
      shareImage: '',
      isAgent: false,
      //分享提示弹出
      isGroupon: false,
      //标识是否是一个参团购买
      soldOut: false,
      canWrite: false,
      //用户是否获取了保存相册的权限
      isSeckill: false,
      // 默认非秒杀商品
      seckillId: 0,
      seckillGoodsVo: {},
      countDownHour: '00',
      countDownMinute: '00',
      countDownSecond: '00',
      seckillDoing: false, // 是否正在进行的秒杀
      article_goodsDetail: '',
      soldout: false,
      checkSpecificationUrl: '',
      videoData: {
        playDoor: 'pause',
        userClick: 'pause',
        voice: 0,
      },
      goodsNumCount: 0,
    }
  },

  components: {
    shareTip,
    commentPage,
  },
  props: {},
  // 页面分享
  onShareAppMessage: function() {
    let that = this
    let userInfo = uni.getStorageSync('userInfo')
    let shareUserId = 1

    if (userInfo) {
      shareUserId = userInfo.userId
    }

    console.log('分享地址：' + '/pages/index/index?goodId=' + this.id + '&shareUserId=' + shareUserId)
    return {
      title: that.goods.name,
      desc: '好货分享',
      path: '/pages/index/index?goodId=' + this.id + '&shareUserId=' + shareUserId,
    }
  },
  onLoad: function(options) {
    // 页面初始化 options为页面跳转所带来的参数
    this.setData({
      isSeckill: options.isSeckill,
      seckillId: options.seckillId ? options.seckillId : 0,
      seckillDoing: options.seckillDoing == 1 ? true : false,
    })

    if (options.id) {
      this.setData({
        id: parseInt(options.id),
      })
      this.getGoodsInfo()
    }

    if (options.grouponId) {
      this.setData({
        isGroupon: true,
      })
      this.getGrouponInfo(options.grouponId)
    }

    this.topicInfo = uni.getStorageSync('topic')
    console.log('this.topicInfo===========================')
    console.log(this.topicInfo.state)

    // let that = this
    // uni.getSetting({
    //   success: function(res) {
    //     console.log(res) //不存在相册授权

    //     if (!res.authSetting['scope.writePhotosAlbum']) {
    //       uni.authorize({
    //         scope: 'scope.writePhotosAlbum',
    //         success: function() {
    //           that.setData({
    //             canWrite: true,
    //           })
    //         },
    //         fail: function(err) {
    //           that.setData({
    //             canWrite: false,
    //           })
    //         },
    //       })
    //     } else {
    //       that.setData({
    //         canWrite: true,
    //       })
    //     }
    //   },
    // })

    let videoBtn = uni.createVideoContext('videoEl', this)
    videoBtn.play()
    setTimeout(() => {
      videoBtn.pause()
    }, 1000)
  },
  onShow: function() {
    // 页面显示
    let that = this
    util.request(api.CartGoodsCount).then(function(res) {
      if (res.errno === 0) {
        that.setData({
          cartGoodsCount: res.data,
        })
      }
    })
    let userInfo = uni.getStorageSync('userInfo')

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true,
      })
    }

    if (this.videoData.userClick === 'play') {
      let videoBtn = uni.createVideoContext('videoEl', this)
      videoBtn.play()
    }
  },
  onPageScroll() {
    const _this = this
    const query = uni.createSelectorQuery().in(this)
    query
      .select('#goodsTabsScroll')
      .boundingClientRect((data) => {
        if (data.top < 20) {
          _this.goodsTabsScrollCls = `
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 200;
          `
        } else {
          _this.goodsTabsScrollCls = ''
        }
      })
      .exec()
  },
  onHide: function() {
    // 页面隐藏
  },
  onUnload: function() {
    // 页面关闭
  },
  onReady: function() {
    // 页面渲染完成
    let that = this
    let userInfo = uni.getStorageSync('userInfo')

    if (userInfo && userInfo.userLevel == 2) {
      that.setData({
        isAgent: true,
      })
    }
  },

  // 下拉刷新
  onPullDownRefresh() {
    uni.showNavigationBarLoading() //在标题栏中显示加载

    this.getGoodsInfo()
    uni.hideNavigationBarLoading() //完成停止加载

    uni.stopPullDownRefresh() //停止下拉刷新
  },

  methods: {
    onVideoPause() {
      this.videoData.playDoor = 'pause'
    },
    onVideoPlay() {
      this.videoData.playDoor = 'play'
    },
    videoVoiceBtn(i) {
      this.videoData.voice = i
    },
    coverVideoBtn() {
      let videoBtn = uni.createVideoContext('videoEl', this)
      if (this.videoData.playDoor === 'play') {
        this.videoData.userClick = 'pause'
        videoBtn.pause()
      } else {
        this.videoData.userClick = 'play'
        videoBtn.play()
      }
    },
    goBackTop() {
      window.location.href = '/'
    },
    AuthLoginByJsapi() {
      this.$api(
        'AuthLoginByJsapi',
        {
          url: location.href,
        },
        'POST'
      )
        .then((res) => {
          this.wxShare(res.data)
        })
        .catch((err) => {
          console.log(err)
        })
    },
    wxShare(res1) {
      let _this = this
      let wx = window.wxSDK

      /* wx.config({
        // debug: true,
        appId: res1.appId,
        timestamp: res1.timestamp,
        nonceStr: res1.nonceStr,
        signature: res1.signature,
        jsApiList: ['updateAppMessageShareData', 'updateTimelineShareData', 'chooseWXPay'],
      }) */

      wx.ready(() => {
        let topic = uni.getStorageSync('topic')
        let ids = topic.id || 41
        let title = _this.goods.name || '泽超新福礼'
        let desc = topic.content || '快来参与吧！'
        let img =
          (_this.goods.gallery && _this.goods.gallery.length && _this.goods.gallery[0]) ||
          window.location.origin + 'logo.jpg'
        let link = window.location.origin + '?myId=' + ids + '&shareId=' + _this.id

        wx.updateAppMessageShareData({
          title: title,
          desc: desc,
          link: link,
          imgUrl: img,
          success: () => {},
        })
        wx.updateTimelineShareData({
          title: title,
          link: link,
          imgUrl: img,
          success: () => {},
        })
      })

      wx.error((response) => {
        console.log(response)
      })
    },
    goodsTabsNoBtn(i) {
      this.goodsTabsNo = i
      this.commentQuery = {
        valueId: this.goods.id,
        type: 0,
      }
    },
    shareFriendOrCircle: function() {
      let that = this
      util
        .request(
          api.CreateShareImg,
          {
            shareObjId: that.id,
            type: 1, //商品类型的海报图
          },
          'POST'
        )
        .then(function(res) {
          if (res.errno === 0) {
            that.setData({
              shareImage: res.data.shareUrl,
            })
          }
        })

      if (this.openShare === false) {
        this.setData({
          openShare: !this.openShare,
        })
      } else {
        return false
      }
    },
    handleSetting: function(e) {
      var that = this // console.log(e)

      if (!e.detail.authSetting['scope.writePhotosAlbum']) {
        uni.showModal({
          title: '警告',
          content: '不授权无法保存',
          showCancel: false,
        })
        that.setData({
          canWrite: false,
        })
      } else {
        uni.showToast({
          title: '保存成功',
        })
        that.setData({
          canWrite: true,
        })
      }
    },
    // 保存分享图
    saveShare: function() {
      let that = this
      uni.downloadFile({
        url: that.shareImage,
        success: function(res) {
          console.log(res)
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePath,
            success: function(res) {
              uni.showModal({
                title: '存图成功',
                content: '图片成功保存到相册了，可以分享到朋友圈了',
                showCancel: false,
                confirmText: '好的',
                confirmColor: '#a78845',
                success: function(res) {
                  if (res.confirm) {
                    console.log('用户点击确定')
                  }
                },
              })
            },
            fail: function(res) {
              console.log('fail')
            },
          })
        },
        fail: function() {
          console.log('fail')
        },
      })
    },
    //从分享的团购进入
    getGrouponInfo: function(grouponId) {
      let that = this
      util
        .request(api.GroupOnJoin, {
          grouponId: grouponId,
        })
        .then(function(res) {
          if (res.errno === 0) {
            that.setData({
              grouponLink: res.data.groupon,
              id: res.data.goods.id,
            }) //获取商品详情

            that.getGoodsInfo()
          }
        })
    },
    // 获取商品信息
    getGoodsInfo: function() {
      let that = this
      util
        .request(api.GoodsDetail, {
          id: that.id,
          seckillId: that.seckillId,
        })
        .then(function(res) {
          if (res.errno === 0) {
            let _specificationList = res.data.specificationList // 如果仅仅存在一种货品，那么商品页面初始化时默认checked

            if (_specificationList.length == 1) {
              if (_specificationList[0].valueList.length == 1) {
                _specificationList[0].valueList[0].checked = true // 如果仅仅存在一种货品，那么商品价格应该和货品价格一致
                // 这里检测一下

                let _productPrice = res.data.productList[0].price
                let _goodsPrice = res.data.info.retailPrice

                if (_productPrice != _goodsPrice) {
                  console.error('商品数量价格和货品不一致')
                }

                that.setData({
                  checkedSpecText: _specificationList[0].valueList[0].value,
                  tmpSpecText: _specificationList[0].valueList[0].value,
                  tmpSpecTextNum: res.data.productList[0].number,
                })
              }
            }

            let aaa = res.data.productList
            let bbb = aaa.sort((a, b) => {
              return a.price - b.price
            })

            aaa.forEach((v1) => {
              that.goodsNumCount = that.goodsNumCount + v1.number
            })

            console.log('---------------', that.goodsNumCount)

            let checkedSpecPrice = 0

            let goodsTemp = res.data.info

            if (bbb && bbb.length) {
              checkedSpecPrice = bbb[0].price || 0 // res.data.info.price // retailPrice
              goodsTemp.counterPrice = bbb[0].counterPrice || 0
              goodsTemp.price1 = bbb[0].price || 0
            }

            if (that.isSeckill) {
              checkedSpecPrice = res.data.seckillGoodsVo.seckillPrice
            }

            that.setData({
              goods: goodsTemp,
              attribute: res.data.attribute,
              issueList: res.data.issue,
              comment: res.data.comment,
              brand: res.data.brand,
              specificationList: res.data.specificationList,
              productList: res.data.productList,
              userHasCollect: res.data.userHasCollect,
              shareImage: res.data.shareImage == null ? '' : res.data.shareImage,
              checkedSpecPrice: checkedSpecPrice,
              groupon: res.data.groupon,
              seckillGoodsVo: res.data.seckillGoodsVo,
            }) // 如果是秒杀商品

            //that.AuthLoginByJsapi()
            that.wxShare()

            // that
            //   .$api('comment_lists', {
            //     page: 1,
            //     limit: 20,
            //     sort: 'add_time',
            //     order: 'desc',
            //     goodsSn: res.data.info.goodsSn,
            //   })
            //   .then((res1) => {
            //     console.log(res1)
            //   })

            if (res.data.seckillGoodsVo) {
              wxh.time2(res.data.seckillGoodsVo.stop, that)
            } //如果是通过分享的团购参加团购，则团购项目应该与分享的一致并且不可更改

            if (that.isGroupon) {
              let groupons = that.groupon

              for (var i = 0; i < groupons.length; i++) {
                if (groupons[i].id != that.grouponLink.rulesId) {
                  groupons.splice(i, 1)
                }
              }

              groupons[0].checked = true //重设团购规格

              that.setData({
                groupon: groupons,
              })
            }

            if (res.data.userHasCollect == 1) {
              that.setData({
                collectImage: that.hasCollectImage,
              })
            } else {
              that.setData({
                collectImage: that.noCollectImage,
              })
            }

            //WxParse.wxParse('goodsDetail', 'html', res.data.info.detail, that)
            that.article_goodsDetail = that.escape2Html(res.data.info.detail) //获取推荐商品

            that.getGoodsRelated()
          }
        })
    },
    // 获取推荐商品
    getGoodsRelated: function() {
      let that = this
      util
        .request(api.GoodsRelated, {
          id: that.id,
        })
        .then(function(res) {
          if (res.errno === 0) {
            that.setData({
              relatedGoods: res.data.goodsList,
            })
          }
        })
    },
    // 团购选择
    clickGroupon: function(event) {
      let that = this //参与团购，不可更改选择

      if (that.isGroupon) {
        return
      }

      let specValueId = event.currentTarget.dataset.valueId
      let _grouponList = this.groupon

      for (let i = 0; i < _grouponList.length; i++) {
        if (_grouponList[i].id == specValueId) {
          if (_grouponList[i].checked) {
            _grouponList[i].checked = false
          } else {
            _grouponList[i].checked = true
          }
        } else {
          _grouponList[i].checked = false
        }
      }

      that.setData({
        groupon: _grouponList,
      })
    },
    // 规格选择
    clickSkuValue: function(event) {
      let that = this
      let specName = event.currentTarget.dataset.name
      let specValueId = event.currentTarget.dataset.valueId //判断是否可以点击
      //TODO 性能优化，可在wx:for中添加index，可以直接获取点击的属性名和属性值，不用循环

      let _specificationList = this.specificationList

      for (let i = 0; i < _specificationList.length; i++) {
        if (_specificationList[i].name === specName) {
          for (let j = 0; j < _specificationList[i].valueList.length; j++) {
            if (_specificationList[i].valueList[j].id == specValueId) {
              //如果已经选中，则反选
              if (_specificationList[i].valueList[j].checked) {
                _specificationList[i].valueList[j].checked = false
              } else {
                _specificationList[i].valueList[j].checked = true //选择了，则判断当前是否有图片，且图片内容不能为空，不能为默认lazy图片，则替换

                that.setSpecificationUrl(_specificationList[i].valueList[j].picUrl)
              }
            } else {
              _specificationList[i].valueList[j].checked = false
            }
          }
        }
      }

      this.setData({
        specificationList: _specificationList,
      }) //重新计算spec改变后的信息

      this.changeSpecInfo() //重新计算哪些值不可以点击
    },
    //获取选中的团购信息
    getCheckedGrouponValue: function() {
      let checkedValues = {}
      let _grouponList = this.groupon

      for (let i = 0; i < _grouponList.length; i++) {
        if (_grouponList[i].checked) {
          checkedValues = _grouponList[i]
        }
      }

      return checkedValues
    },
    setSpecificationUrl: function(picUrl) {
      if (picUrl && picUrl.length > 1 && picUrl.indexOf('lazyload.png') == -1)
        this.setData({
          checkSpecificationUrl: picUrl,
        })
    },
    //获取选中的规格信息
    getCheckedSpecValue: function() {
      let checkedValues = []
      let _specificationList = this.specificationList

      for (let i = 0; i < _specificationList.length; i++) {
        let _checkedObj = {
          name: _specificationList[i].name,
          valueId: 0,
          valueText: '',
        }

        for (let j = 0; j < _specificationList[i].valueList.length; j++) {
          if (_specificationList[i].valueList[j].checked) {
            _checkedObj.valueId = _specificationList[i].valueList[j].id
            _checkedObj.valueText = _specificationList[i].valueList[j].value
          }
        }

        checkedValues.push(_checkedObj)
      }

      return checkedValues
    },
    //判断规格是否选择完整
    isCheckedAllSpec: function() {
      return !this.getCheckedSpecValue().some(function(v) {
        if (v.valueId == 0) {
          return true
        }
      })
    },
    getCheckedSpecKey: function() {
      let checkedValue = this.getCheckedSpecValue().map(function(v) {
        return v.valueText
      })
      return checkedValue
    },
    // 规格改变时，重新计算价格及显示信息
    changeSpecInfo: function() {
      let checkedNameValue = this.getCheckedSpecValue() //设置选择的信息

      let checkedValue = checkedNameValue
        .filter(function(v) {
          if (v.valueId != 0) {
            return true
          } else {
            return false
          }
        })
        .map(function(v) {
          return v.valueText
        })

      if (checkedValue.length > 0) {
        this.setData({
          tmpSpecText: checkedValue.join('　'),
        })
      } else {
        this.setData({
          tmpSpecText: '',
        })
      }

      if (this.isCheckedAllSpec()) {
        this.setData({
          checkedSpecText: this.tmpSpecText,
        }) // 规格所对应的货品选择以后

        let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey())

        if (!checkedProductArray || checkedProductArray.length <= 0) {
          this.setData({
            soldOut: true,
          })
          console.error('规格所对应货品不存在')
          return
        }

        let checkedProduct = checkedProductArray[0]
        this.tmpSpecTextNum = checkedProduct.number
        let checkedPrice = checkedProduct.price
        let soldOut = checkedProduct.number <= 0

        if (this.isSeckill) {
          checkedPrice = checkedProduct.seckillPrice
          soldOut = checkedProduct.seckillNumber <= 0
        } // 如果选择库存为0 的货品，则价格显示商品销售价格

        if (soldOut) {
          // checkedPrice = this.goods.retailPrice
        }

        this.setData({
          checkedSpecPrice: checkedPrice,
          soldOut: soldOut,
        })
      } else {
        this.setData({
          checkedSpecText: '规格数量选择',
          checkedSpecPrice: this.goods.price, // retailPrice,
          soldOut: false,
        })
      }
    },
    // 获取选中的产品（根据规格）
    getCheckedProductItem: function(key) {
      return this.productList.filter(function(v) {
        console.log(key.toString() + '--' + v.specifications.toString())

        if (v.specifications.toString() == key.toString()) {
          return true
        } else {
          return false
        }
      })
    },
    //添加或是取消收藏
    addCollectOrNot: function() {
      if (this.topicInfo.state == 1) {
        uni.showToast({
          title: '活动未开始',
          icon: 'none',
        })
        return
      }
      uni.makePhoneCall({
        phoneNumber: '4000086770',
      })
      // let that = this
      // util
      //   .request(
      //     api.CollectAddOrDelete,
      //     {
      //       type: 0,
      //       valueId: this.id,
      //     },
      //     'POST'
      //   )
      //   .then(function(res) {
      //     let _res = res

      //     if (_res.errno == 0) {
      //       if (_res.data.type == 'add') {
      //         that.setData({
      //           collectImage: that.hasCollectImage,
      //         })
      //       } else {
      //         that.setData({
      //           collectImage: that.noCollectImage,
      //         })
      //       }
      //     } else {
      //       uni.showToast({
      //         image: '/static/static/images/icon_error.png',
      //         title: _res.errmsg,
      //         mask: true,
      //       })
      //     }
      //   })
    },
    //立即购买（先自动加入购物车）
    addFast: function() {
      if (this.topicInfo.state == 1) {
        uni.showToast({
          title: '活动未开始',
          icon: 'none',
        })
        return
      }
      let that = this

      if (this.openAttr == false) {
        //打开规格选择窗口
        this.setData({
          openAttr: !this.openAttr,
        })
      } else {
        //提示选择完整规格
        if (!this.isCheckedAllSpec()) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '请选择完整规格',
          })
          return false
        } //根据选中的规格，判断是否有对应的sku信息

        let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey())

        if (!checkedProductArray || checkedProductArray.length <= 0) {
          //找不到对应的product信息，提示没有库存
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        }

        let checkedProduct = checkedProductArray[0] //验证库存

        let soldOut = checkedProduct.number <= 0

        if (that.isSeckill) {
          soldOut = checkedProduct.seckillNumber <= 0
        }

        if (soldOut) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        } //验证团购是否有效

        let checkedGroupon = this.getCheckedGrouponValue() //立即购买

        util
          .request(
            api.CartFastAdd,
            {
              goodsId: this.goods.id,
              number: this.number,
              productId: checkedProduct.id,
            },
            'POST'
          )
          .then(function(res) {
            if (res.errno == 0) {
              // 如果storage中设置了cartId，则是立即购买，否则是购物车购买
              try {
                uni.setStorageSync('cartId', res.data)
                uni.setStorageSync('grouponRulesId', checkedGroupon.id)
                uni.setStorageSync('grouponLinkId', that.grouponLink.id)
                uni.setStorageSync('seckilled', 0)
                uni.navigateTo({
                  url: '/pages/checkout/checkout',
                })
              } catch (e) {}
            } else {
              uni.showToast({
                image: '/static/static/images/icon_error.png',
                title: res.errmsg,
                mask: true,
              })
            }
          })
          .catch((err) => {
            uni.showToast({
              image: '/static/static/images/icon_error.png',
              title: err.errmsg,
              mask: true,
            })
          })
      }
    },
    doSeckill: function() {
      let that = this

      if (this.openAttr == false) {
        //打开规格选择窗口
        this.setData({
          openAttr: !this.openAttr,
        })
      } else {
        //提示选择完整规格
        if (!this.isCheckedAllSpec()) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '请选择完整规格',
          })
          return false
        } //根据选中的规格，判断是否有对应的sku信息

        let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey())

        if (!checkedProductArray || checkedProductArray.length <= 0) {
          //找不到对应的product信息，提示没有库存
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        }

        let checkedProduct = checkedProductArray[0] //验证库存

        let soldOut = checkedProduct.number <= 0

        if (that.isSeckill) {
          soldOut = checkedProduct.seckillNumber <= 0
        }

        if (soldOut) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        } // 对接秒杀后台接口

        util
          .request(
            api.DoSeckill,
            {
              seckillGoodsId: that.seckillId,
              productId: checkedProduct.id,
              number: that.number,
            },
            'GET'
          )
          .then((res) => {
            let status = res.data.status
            let seckillMsg = res.data.seckillMsg

            if (status == 2) {
              // 秒杀成功
              uni.setStorageSync('cartId', '0')
              uni.setStorageSync('seckilled', 1)
              uni.setStorageSync('seckillGoodsId', that.seckillId)
              uni.navigateTo({
                url: '/pages/checkout/checkout',
              })
            } else {
              uni.showToast({
                image: '/static/static/images/icon_error.png',
                title: seckillMsg,
              })
            }
          })
      }
    },
    subscribeMsg: function(e) {
      let that = this // 如果是已经提醒的则不需要再执行后续逻辑

      if (that.seckillGoodsVo.tiped == 1) {
        console.log('已提醒，请勿重复点击！')
        return
      }

      let templateId = api.SeckillSubTemplateId
      uni.requestSubscribeMessage({
        // 相当于询问用户愿不愿意接收这个模板的订阅消息
        tmplIds: [templateId],

        success(res) {
          if (res[templateId] == 'accept') {
            that.subscribeSeckill()
          }
        },

        complete(res) {
          console.log(res)
        },
      })
    },
    subscribeSeckill: function() {
      let that = this
      let seckillGoodsId = that.seckillId
      util
        .request(api.SubscribeSeckill, {
          id: seckillGoodsId,
          status: 2,
        })
        .then(function(res) {
          if (res.errno === 0) {
            let seckillGoodsVo = that.seckillGoodsVo
            seckillGoodsVo.tiped = 1 // 标记已提醒

            that.setData({
              seckillGoodsVo: seckillGoodsVo,
            })
          }
        })
    },
    //添加到购物车
    addToCart: function() {
      if (this.topicInfo.state == 1) {
        uni.showToast({
          title: '活动未开始',
          icon: 'none',
        })
        return
      }
      let that = this

      if (this.openAttr == false) {
        //打开规格选择窗口
        this.setData({
          openAttr: !this.openAttr,
        })
      } else {
        //提示选择完整规格
        if (!this.isCheckedAllSpec()) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '请选择完整规格',
          })
          return false
        } //根据选中的规格，判断是否有对应的sku信息

        let checkedProductArray = this.getCheckedProductItem(this.getCheckedSpecKey())

        if (!checkedProductArray || checkedProductArray.length <= 0) {
          //找不到对应的product信息，提示没有库存
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        }

        let checkedProduct = checkedProductArray[0] //验证库存

        let soldOut = checkedProduct.number <= 0

        if (that.isSeckill) {
          soldOut = checkedProduct.seckillNumber <= 0
        }

        if (soldOut) {
          uni.showToast({
            image: '/static/static/images/icon_error.png',
            title: '没有库存',
          })
          return false
        } //添加到购物车

        util
          .request(
            api.CartAdd,
            {
              goodsId: this.goods.id,
              number: this.number,
              productId: checkedProduct.id,
            },
            'POST'
          )
          .then(function(res) {
            let _res = res

            if (_res.errno == 0) {
              uni.showToast({
                title: '添加成功',
              })
              that.setData({
                openAttr: !that.openAttr,
                cartGoodsCount: _res.data,
              })

              if (that.userHasCollect == 1) {
                that.setData({
                  collectImage: that.hasCollectImage,
                })
              } else {
                that.setData({
                  collectImage: that.noCollectImage,
                })
              }

              that.getGoodsInfo()
            } else {
              uni.showToast({
                image: '/static/static/images/icon_error.png',
                title: _res.errmsg,
                mask: true,
              })
            }
          })
          .catch((err) => {
            uni.showToast({
              image: '/static/static/images/icon_error.png',
              title: err.errmsg,
              mask: true,
            })
          })
      }
    },
    cutNumber: function() {
      this.setData({
        number: this.number - 1 > 1 ? this.number - 1 : 1,
      })
    },
    addNumber: function() {
      if (this.tmpSpecTextNum) {
        if (this.number < this.tmpSpecTextNum) {
          this.setData({
            number: this.number + 1,
          })
        }
      } else {
        uni.showToast({
          image: '/static/static/images/icon_error.png',
          title: '请选择完整规格',
        })
      }
    },
    switchAttrPop: function() {
      if (this.openAttr == false) {
        this.setData({
          openAttr: !this.openAttr,
        })
      }
    },
    closeAttr: function() {
      this.setData({
        openAttr: false,
      })
    },
    closeShare: function() {
      this.setData({
        openShare: false,
      })
    },
    openCartPage: function() {
      if (this.topicInfo.state == 1) {
        uni.showToast({
          title: '活动未开始',
          icon: 'none',
        })
        return
      }
      this.$store.dispatch('app/on_tabBotName', this.$store.state.app.tabsList[1])
      uni.redirectTo({
        url: '/pages/index/index',
      })
      // uni.navigateBack()
    },
    //根据已选的值，计算其它值的状态
    setSpecValueStatus: function() {},
    onColse: function() {
      this.setData({
        isAgent: false,
      })
    },
  },
}
</script>
<style>
.container {
  margin-bottom: 140rpx;
}

.goodsimgs {
  width: 750rpx;
  height: 750rpx;
}

.goodsimgs .swiperImage {
  width: 750rpx;
  height: 750rpx;
}

.video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  overflow: hidden;
}
.cover-view {
  position: relative;
  width: 100%;
  height: 750rpx;
}
.cover-box {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 100;
  position: relative;
}
.cover-box1 {
  width: 165rpx;
  height: 165rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.cover-box2 {
  width: 60rpx;
  height: 60rpx;
  position: absolute;
  right: 20rpx;
  bottom: 20rpx;
}

.commodity_screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0; /*  #ifdef  H5  */
  top: calc(88rpx + constant(safe-area-inset-top));
  top: calc(88rpx + env(safe-area-inset-top)); /*  #endif  */
  left: 0;
  background: #000;
  opacity: 0.2;
  overflow: hidden;
  z-index: 1000;
  color: #fff;
}

.commodity_attr_box {
  width: 100%;
  overflow: hidden;
  position: fixed;
  bottom: 0;
  left: 0;
  z-index: 2000;
  background: #fff;
  padding-top: 20rpx;
}

.goods-info {
  width: 750rpx;
  /* height: 330rpx; */
  overflow: hidden;
  background: #fff;
}

.goods-info .goods-info1 {
  width: 95%;
  font-size: 30rpx;
  line-height: 34rpx;
  margin-bottom: 30rpx;
  max-height: 68rpx;
  font-weight: bold;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.goods-info .priceSales {
  font-size: 24rpx;
  line-height: 24rpx;
  color: #b5b6b8;
}

.goods-info .price1 {
  flex: 1;
}

.goods-info .c {
  display: block;
  width: 718.75rpx;
  height: 100%;
  margin-left: 31.25rpx;
  padding: 18rpx 31.25rpx 0rpx 0;
  border-bottom: 1px solid #f4f4f4;
}

.goods-info .c text {
  display: block;
  width: 687.5rpx;
  text-align: left;
}

.goods_name {
  /* border: 1px solid black; */
  height: 90rpx;
  line-height: 86rpx;
  border-bottom: 1px solid #fafafa;
}

.goods_name_left {
  /* border: 1px solid #757575; */
  float: left;
  height: 90rpx;
  line-height: 86rpx;
  margin-left: 25rpx;
  width: 76%;
  letter-spacing: 1rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.goods_name_right {
  float: right;
  font-weight: 550;
  margin-top: 28rpx;
  width: 18%;
  height: 90rpx;
  line-height: 85rpx;
  padding: 0;
  margin: 0;
  margin-right: 0rpx;
  text-align: center;
  font-size: 30rpx;
  color: #f4f4f4;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 0rpx;
  border-bottom-right-radius: 0rpx;
  letter-spacing: 3rpx;
  /* background-image: linear-gradient(to right, #ff7701 100%); */
  background-image: linear-gradient(to right, #f3d10e 0%, #f48f18 100%);
}

.goods-info .desc {
  height: 43rpx;
  margin-bottom: 41rpx;
  line-height: 36rpx;
}

.goods-info .price {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 30rpx;
}

.goods-info .counterPrice {
  padding-left: 5%;
  display: inline-block;
  text-decoration: line-through;
}

.goods-info .retailPrice {
  display: inline-block;
  padding-left: 0rpx;
}

.goods-info .brand {
  margin-top: 23rpx;
  min-height: 40rpx;
  text-align: left;
}

.goods-info .brand text {
  display: inline-block;
  width: auto;
  padding: 2px 30rpx 2px 10.5rpx;
  line-height: 35.5rpx;
  border: 1px solid #f48f18;
  font-size: 26rpx;
  color: #f48f18;
  border-radius: 4px;
  background: url('')
    95% center no-repeat;
  background-size: 10.75rpx 18.75rpx;
}

.goods-info .seckillNotiy {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  min-height: 30rpx;
}

.goods-info .seckillNotiy .seckilltag {
  width: 25%;
  min-height: 30rpx;
  text-align: left;
  margin-top: 15rpx;
}

.goods-info .seckillNotiy .seckilltime {
  width: 75%;
  min-height: 30rpx;
  text-align: -webkit-match-parent;
  margin-top: 15rpx;
}

.goods-info .seckillNotiy .seckilltime text {
  display: inline-block;
  width: auto;
  line-height: 35.5rpx;
  font-size: 22rpx;
  color: #f41841;
  background-size: 10.75rpx 18.75rpx;
}

.goods-info .seckillNotiy .seckilltag text {
  display: inline-block;
  width: auto;
  padding: 2px 30rpx 2px 10.5rpx;
  line-height: 20rpx;
  border: 1px solid #f41841;
  font-size: 22rpx;
  color: #f41841;
  background: gold;
  border-radius: 0px;
  background-size: 10.75rpx 18.75rpx;
}

.section-nav {
  width: 750rpx;
  height: 108rpx;
  background: #fff;
  margin-bottom: 20rpx;
}

.section-nav .t {
  float: left;
  width: 600rpx;
  height: 108rpx;
  line-height: 108rpx;
  margin-left: 31.25rpx;
}

.section-nav .i {
  float: right;
  width: 52rpx;
  height: 52rpx;
  margin-right: 16rpx;
  margin-top: 28rpx;
}

.section-act .t {
  float: left;
  display: flex;
  align-items: center;
  width: 600rpx;
  height: 108rpx;
  overflow: hidden;
  line-height: 108rpx;
  margin-left: 31.25rpx;
}

.section-act .label {
  color: #999;
}

.section-act .tag {
  display: flex;
  align-items: center;
  padding: 0 10rpx;
  border-radius: 3px;
  height: 37rpx;
  width: auto;
  color: #f48f18;
  overflow: hidden;
  border: 1px solid #f48f18;
  font-size: 25rpx;
  margin: 0 10rpx;
}

.section-act .text {
  display: flex;
  align-items: center;
  height: 37rpx;
  width: auto;
  overflow: hidden;
  color: #f48f18;
  font-size: 29rpx;
}

.comments {
  width: 100%;
  height: auto;
  padding-left: 30rpx;
  background: #fff;
  margin: 20rpx 0;
}

.comments .h {
  height: 102.5rpx;
  line-height: 100.5rpx;
  width: 718.75rpx;
  padding-right: 16rpx;
  border-bottom: 1px solid #dfdfdf;
}

.comments .h .t {
  display: block;
  float: left;
  width: 50%;
}

.comments .h .i {
  display: block;
  float: right;
  width: 164rpx;
  height: 100.5rpx;
  line-height: 100.5rpx;
  background: url('')
    right center no-repeat;
  background-size: 52rpx;
}

.comments .b {
  height: auto;
  width: 720rpx;
  padding-top: 50rpx;
}

.comments .item {
  height: auto;
  width: 720rpx;
  overflow: hidden;
}

.comments .info {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 30rpx;
}

.comments .user {
  font-size: 29rpx;
  line-height: 66rpx;
}

.comments .user image {
  display: block;
  float: left;
  width: 67rpx;
  height: 67rpx;
  margin-right: 27rpx;
  border-radius: 50%;
  overflow: hidden;
}

.comments .time {
  display: block;
  width: auto;
  height: 67rpx;
  line-height: 67rpx;
  color: #999;
  font-size: 28rpx;
  margin-right: 30rpx;
}

.comments .content {
  width: 720rpx;
  padding-right: 30rpx;
  line-height: 45.8rpx;
  font-size: 28rpx;
  margin-bottom: 50rpx;
}

.comments .imgs {
  width: 720rpx;
  height: auto;
  margin-bottom: 25rpx;
}

.comments .imgs .img {
  height: 150rpx;
  width: 150rpx;
  margin-right: 28rpx;
}

.comments .spec {
  width: 720rpx;
  padding-right: 30rpx;
  line-height: 30rpx;
  font-size: 24rpx;
  color: #999;
  margin-bottom: 30rpx;
}

.goods-tabs {
  display: flex;
  align-content: center;
  justify-content: space-around;
  background: #fff;
  padding: 20rpx;
}

.goods-tabsA {
  width: 100%;
  height: 100rpx;
  background: #fff;
}

.goodsTabWrap {
  min-height: calc(100vh - 280rpx);
  background: #fff;
}

.goodsTabWrapP {
  padding: 0 20rpx;
}

.goods-tabs1 {
  padding: 10rpx;
  line-height: 28rpx;
  font-size: 28rpx;
}

.goods-tabs-on {
  color: #fd4d36;
}

.goods-tabs-on:after {
  display: block;
  content: '';
  width: 38rpx;
  height: 3rpx;
  background: #fd4d36;
  margin-top: 10rpx;
}

.goods-attr {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  padding: 0 31.25rpx 0 31.25rpx;
  background: #fff;
}

.goods-attr .t {
  width: 687.5rpx;
  height: 104rpx;
  line-height: 104rpx;
}

.goods-attr .item {
  width: 687.5rpx;
  height: 65rpx;
  padding: 10rpx 20rpx;
  margin-bottom: 3rpx;
  background: #f7f7f7;
}

.goods-attr .left {
  float: left;
  font-size: 28rpx;
  width: 134rpx;
  height: 45rpx;
  line-height: 45rpx;
  overflow: hidden;
  color: #666;
  font-weight: bold;
}

.goods-attr .right {
  float: left;
  font-size: 28rpx;
  margin-left: 35rpx;
  width: 465rpx;
  height: 45rpx;
  line-height: 45rpx;
  overflow: hidden;
  color: #666;
}

.detail {
  width: 750rpx;
  height: auto;
  overflow: hidden;
}

.detail image {
  width: 750rpx;
  display: block;
}

.common-problem {
  width: 750rpx;
  height: auto;
  overflow: hidden;
}

.common-problem .h {
  position: relative;
  height: 145.5rpx;
  width: 750rpx;
  padding: 56.25rpx 0;
  background: #fff;
  text-align: center;
}

.common-problem .h .line {
  display: inline-block;
  position: absolute;
  top: 72rpx;
  left: 0;
  z-index: 2;
  height: 1px;
  margin-left: 225rpx;
  width: 300rpx;
  background: #ccc;
}

.common-problem .h .title {
  display: inline-block;
  position: absolute;
  top: 56.125rpx;
  left: 0;
  z-index: 3;
  height: 33rpx;
  margin-left: 285rpx;
  width: 180rpx;
  background: #fff;
}

.common-problem .b {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  padding: 0rpx 30rpx;
  background: #fff;
}

.common-problem .item {
  height: auto;
  overflow: hidden;
  padding-bottom: 25rpx;
}

.common-problem .question-box .spot {
  float: left;
  display: block;
  height: 8rpx;
  width: 8rpx;
  background: #b4282d;
  border-radius: 50%;
  margin-top: 11rpx;
}

.common-problem .question-box .question {
  float: left;
  line-height: 30rpx;
  padding-left: 8rpx;
  display: block;
  font-size: 26rpx;
  padding-bottom: 15rpx;
  color: #303030;
}

.common-problem .answer {
  line-height: 36rpx;
  padding-left: 16rpx;
  font-size: 26rpx;
  color: #787878;
}

.related-goods {
  width: 750rpx;
  height: auto;
  overflow: hidden;
  padding-bottom: 80rpx;
}

.related-goods .h {
  position: relative;
  height: 145.5rpx;
  width: 750rpx;
  padding: 56.25rpx 0;
  background: #fff;
  text-align: center;
  border-bottom: 1px solid #f4f4f4;
}

.related-goods .h .line {
  display: inline-block;
  position: absolute;
  top: 72rpx;
  left: 0;
  z-index: 2;
  height: 1px;
  margin-left: 225rpx;
  width: 300rpx;
  background: #ccc;
}

.related-goods .h .title {
  display: inline-block;
  position: absolute;
  top: 56.125rpx;
  left: 0;
  z-index: 3;
  height: 33rpx;
  margin-left: 285rpx;
  width: 180rpx;
  background: #fff;
}

.related-goods .b {
  width: 750rpx;
  height: auto;
  overflow: hidden;
}

.related-goods .b .item {
  float: left;
  background: #fff;
  width: 375rpx;
  height: auto;
  overflow: hidden;
  text-align: center;
  padding: 15rpx 31.25rpx;
  border-right: 1px solid #f4f4f4;
  border-bottom: 1px solid #f4f4f4;
}

.related-goods .item .img {
  width: 311.45rpx;
  height: 311.45rpx;
}

.related-goods .item .name {
  display: block;
  width: 311.45rpx;
  height: 35rpx;
  margin: 11.5rpx 0 15rpx 0;
  text-align: center;
  overflow: hidden;
  font-size: 30rpx;
  color: #333;
}

.related-goods .item .price {
  display: block;
  width: 311.45rpx;
  height: 30rpx;
  text-align: center;
  font-size: 30rpx;
  color: #b4282d;
}

.bottom-btn {
  position: fixed;
  left: 0;
  bottom: 0;
  z-index: 10;
  width: 750rpx;
  height: 140rpx;
  display: flex;
  align-items: center;
  background: #fff;
  padding-bottom: 40rpx;
  padding-right: 30rpx;
}

.bottom-btnA1 {
  width: 220rpx;
  display: flex;
  align-items: center;
  justify-content: space-around;
}

.bottom-btnA1 .text {
  font-size: 22rpx;
  color: #898b8d;
  line-height: 22rpx;
}

.bottom-btnA1 .l {
  padding: 0 20rpx;
}

.bottom-btn .l {
  width: 162rpx;
  text-align: center;
}

.bottom-btn .l.l-collect {
  border-right: none;
  border-left: none;
  text-align: center;
  text-align: center;
}

.bottom-btn .l.l-kefu {
  position: relative;
  height: 54rpx;
  width: 63rpx;
}

.bottom-btn .l.l-cart .box {
  position: relative;
  text-align: center;
}

.bottom-btn .l.l-cart .cart-count {
  height: 28rpx;
  width: 28rpx;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  background: #ff742a;
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  line-height: 28rpx;
  border-radius: 50%;
}

.bottom-btn .l .icon1 {
  width: 44rpx;
  height: 44rpx;
}

.bottom-btn .l.l-cart .icon {
  position: absolute;
  top: 10rpx;
  left: 0;
}

.bottom-btn .l.l-kefu .kefu-count {
  height: 28rpx;
  width: 28rpx;
  z-index: 10;
  position: absolute;
  top: 0;
  right: 0;
  /* background: #b4282d; */
  text-align: center;
  font-size: 18rpx;
  color: #fff;
  line-height: 28rpx;
  border-radius: 50%;
}

.bottom-btn .l.l-kefu .icon {
  position: absolute;
  top: 10rpx;
  left: 0;
}

.bottom-btn .l .icon {
  display: inline-block;
  height: 44rpx;
  width: 44rpx;
}

.bottom-btn .c {
  width: 240rpx;
  height: 80rpx;
  color: #fff;
  background: linear-gradient(124deg, #f54c56 17%, #f95d20 83%);
  border-radius: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
}

.bottom-btn .r {
  width: 240rpx;
  height: 80rpx;
  color: #fff;
  background: linear-gradient(135deg, #f8a734, #f9bb34);
  border-radius: 80rpx;
  line-height: 80rpx;
  text-align: center;
  font-size: 30rpx;
  margin-right: 20rpx;
}

.bottom-btn .n {
  background: #c0b8ae;
  border-radius: 80rpx;
  height: 80rpx;
  line-height: 80rpx;
  margin-right: 20rpx;
  flex: 1;
  text-align: center;
  color: #fff;
}

.attr-pop-box {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8;
  bottom: 0;
  /* display: none; */
}

.attr-pop {
  width: 100%;
  height: auto;
  padding: 31.25rpx;
  background: #fff;
  position: fixed;
  z-index: 9;
  bottom: 140rpx;
  border-top-left-radius: 20rpx;
  border-bottom-left-radius: 0rpx;
  border-top-right-radius: 20rpx;
  border-bottom-right-radius: 0rpx;
}

.attr-pop .close {
  position: absolute;
  width: 48rpx;
  height: 48rpx;
  right: 31.25rpx;
  overflow: hidden;
  top: 31.25rpx;
}

.attr-pop .close .icon {
  width: 48rpx;
  height: 48rpx;
}

.attr-pop .img-info {
  width: 687.5rpx;
  height: 177rpx;
  overflow: hidden;
  margin-bottom: 41.5rpx;
}

.attr-pop .img {
  float: left;
  height: 177rpx;
  width: 177rpx;
  background: #f4f4f4;
  margin-right: 31.25rpx;
}

.attr-pop .info {
  float: left;
  height: 177rpx;
  display: flex;
  align-items: center;
  width: 450rpx;
}

.attr-pop .p {
  font-size: 48rpx;
  color: #fd4d36;
  height: 48rpx;
  line-height: 48rpx;
  margin-bottom: 10rpx;
}

.attr-pop .p1 {
  font-size: 30rpx;
}

.attr-pop .a {
  font-size: 26rpx;
  color: #5e6063;
  height: 40rpx;
  line-height: 40rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.attr-pop .a1 {
  display: inline-block;
  margin-left: 20rpx;
}

.spec-con {
  width: 100%;
  height: 50vh;
  overflow: hidden;
  overflow-y: auto;
}

.spec-con .name {
  height: 32rpx;
  line-height: 30rpx;
  margin-bottom: 22rpx;
  font-size: 29rpx;
  color: #333;
}

.spec-con .values {
  height: auto;
  margin-bottom: 31.25rpx;
  font-size: 0;
}

.spec-con .value {
  display: inline-block;
  min-width: 106rpx;
  height: 56rpx;
  padding: 0 30rpx;
  line-height: 56rpx;
  text-align: center;
  margin-right: 25rpx;
  margin-bottom: 16.5rpx;
  border-radius: 56rpx;
  font-size: 25rpx;
  color: rgba(33, 34, 35, 1);
  background: rgba(181, 182, 184, 0.2);
}

.spec-con .value.disable {
  border: 1px solid #ccc;
  color: #ccc;
}

.spec-con .value.selected {
  color: #fd4d36;
  background: rgba(253, 77, 54, 0.2);
}

.number-item .selnum {
  width: 242rpx;
  height: 52rpx;
  border: 1px solid rgba(181, 182, 184, 0.3);
  display: flex;
}

.number-item .cut {
  width: 60rpx;
  height: 100%;
  text-align: center;
  line-height: 52rpx;
}

.number-item .number {
  flex: 1;
  height: 100%;
  text-align: center;
  line-height: 52rpx;
  border-left: 1px solid rgba(181, 182, 184, 0.3);
  border-right: 1px solid rgba(181, 182, 184, 0.3);
  float: left;
}

.number-item .add {
  width: 60rpx;
  height: 100%;
  text-align: center;
  line-height: 52rpx;
}

.contact {
  height: 80rpx;
  width: 80rpx;
  border-radius: 100%;
  position: fixed;
  bottom: 106rpx;
  right: 10rpx;
  font-size: 20rpx;
  box-sizing: border-box;
  background: url('')
    no-repeat center 11rpx;
  background-size: 55rpx auto;
}

.share-pop-box {
  width: 100%;
  height: 100%;
  position: fixed;
  background: rgba(0, 0, 0, 0.5);
  z-index: 8;
  bottom: 0;
  /* display: none; */
}

.share-pop {
  width: 100%;
  height: auto;
  max-height: 780rpx;
  padding: 31.25rpx;
  background: #fff;
  position: fixed;
  z-index: 9;
  bottom: 100rpx;
}

.share-pop .close {
  position: absolute;
  width: 48rpx;
  height: 48rpx;
  right: 31.25rpx;
  top: 31.25rpx;
}

.share-pop .close .icon {
  width: 48rpx;
  height: 48rpx;
}

.share-pop .share-info {
  width: 100%;
  height: 225rpx;
  overflow: hidden;
  margin-bottom: 41.5rpx;
}

.sharebtn {
  top: 75rpx;
  background: none !important;
  font-size: 32rpx;
  color: #fff !important;
  border-radius: 0%;
  width: 175rpx;
  height: 150rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  float: left;
  background: #fff;
  border-bottom: 0px solid #fafafa;
  margin-left: 15%;
}

.sharebtn::after {
  border: none;
  border-radius: 0%;
}

.savesharebtn {
  top: 75rpx;
  background: none !important;
  font-size: 32rpx;
  color: #fff !important;
  border-radius: 0%;
  width: 175rpx;
  height: 150rpx;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  float: right;
  background: #fff;
  border-bottom: 0px solid #fafafa;
  margin-right: 15%;
}

.savesharebtn::after {
  border: none;
  border-radius: 0%;
}

.sharebtn_image {
  /* border: 1px solid #757575; */
  width: 128rpx;
  height: 128rpx;
  margin-top: 0rpx;
}

.sharebtn_text {
  /* border: 1px solid #757575; */
  width: 150rpx;
  margin-bottom: 2rpx;
  height: 20rpx;
  line-height: 20rpx;
  font-size: 20rpx;
  color: #555;
}

.separate {
  background: #e0e3da;
  width: 100%;
  height: 6rpx;
}

.seckill {
  overflow-y: hidden;
  height: 102rpx;
  line-height: 102rpx;
  border-bottom: 1px solid #fafafa;
  background-image: url('');
  background-size: cover;
}

.seckill_name_left {
  font-weight: 550;
  line-height: 102rpx;
  font-size: 38rpx;
  letter-spacing: 1rpx;
}

.seckill_name_right {
  float: right;
  font-weight: 550;
  margin-top: 28rpx;
  width: 140rpx;
  height: 80rpx;
  line-height: 82rpx;
  padding: 0;
  margin: 0;
  margin-right: 0rpx;
  text-align: center;
  font-size: 25rpx;
  color: #f4f4f4;
  border-top-left-radius: 50rpx;
  border-bottom-left-radius: 50rpx;
  border-top-right-radius: 0rpx;
  border-bottom-right-radius: 0rpx;
  letter-spacing: 3rpx;
  background-image: linear-gradient(to right, #f3d10e 0%, #f48f18 100%);
}
.seckill .seckill_name_left .seckill_left {
  float: left;
  width: 70%;
  height: 102rpx;
  padding-left: 50px;
}

.seckill .seckill_name_left .seckill_right {
  display: flex;
  flex-direction: column;
  align-items: center;
  float: right;
  width: 30%;
  height: 110rpx;
  padding-top: 18rpx;
}

.seckill .seckill_name_left .seckill_right .children {
  display: flex;
  align-items: center;
  height: 35rpx;
  padding-bottom: 5px;
  overflow-y: hidden;
}

.seckill .seckill_name_left .seckill_left .price .desc {
  border: 1px solid #ffffff !important;
  border-radius: 30rpx;
  height: 30px;
  line-height: 30px;
  color: white;
  display: flex;
  align-items: center;
  vertical-align: center;
  justify-content: center;
  flex-direction: row;
  font-size: 13px;
  width: 100px;
}

.seckill .seckill_name_left .seckill_right .children .num {
  background-color: red;
  width: 20px;
  color: white !important;
  display: flex;
  align-items: center;
  vertical-align: center;
  justify-content: center;
  flex-direction: row;
  padding-top: 15rpx;
  font-size: 12px;
}

.seckill .seckill_name_left .seckill_right .rightcolor {
  font-size: 25rpx;
  color: #ef5a61;
}
.seckill_left .retailPrice {
  height: 42rpx;
  line-height: 31rpx;
  font-size: 12px;
  text-decoration: line-through;
  color: white;
}

.seckill_left .secPrice {
  height: 60rpx;
  line-height: 70rpx;
  color: white;
  font-size: 17px;
  font-weight: bolder;
  overflow: hidden;
}
</style>
